const staff_employee_create = {
    template:`
<div>
                        <div class="d-flex justify-content-between flex-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                            <h1 class="h2">Create New Employee</h1>
                        </div>
                        <div class="border-bottom row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input class="form-control" type="text" v-model="form.firstname">
                                </div>
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <input class="form-control" type="text" v-model="form.lastname">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input class="form-control" type="email" v-model="form.email">
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input class="form-control" type="password" v-model="form.password">
                                </div>
                                <div class="form-group">
                                    <label>Scope</label>
                                    <label class="d-block"><input class="mr-1" type="radio" name="scope" value="course" v-model="form.scope">Course</label>
                                    <label class="d-block"><input class="mr-1" type="radio" name="scope" value="training" v-model="form.scope">Training</label>
                                </div>
                                <div class="form-group">
                                    <label>Scope</label>
                                    <label class="d-block"><input class="mr-1" type="radio" name="is_admin" value="0" v-model="form.is_admin">Employee</label>
                                    <label class="d-block"><input class="mr-1" type="radio" name="is_admin" value="1" v-model="form.is_admin">Training</label>
                                </div>
                                <div class="form-group">
                                    <label>Photo</label>
                                    <label for="upload-image" class="upload-image-label">
                                        <div class="border upload-image">
                                            <img :src="photo_preview">
                                            <span class="position-absolute">Choose Photo</span>
                                        </div>
                                        <input type="file" accept="image/*" id="upload-image" class="d-none" @change="preview_photo">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="my-3">
                            <button class="btn btn-primary" @click="submit">Submit</button>
                            <a @click="$router.go(-1)" class="cursor-pointer text-primary mx-4">Cancel</a>
                        </div>
                    </div>    
    `,
    data() {
        return {
            form:{
                firstname:null,
                lastname:null,
                scope:'course',
                is_admin:null,
                photo:null,
                email:null,
                password:null,
            },
            photo_preview:null
        };
    },
    methods:{
        submit(){
            ajax.post(`employee`,this.form).then(res=>{
                if (res.status === 200){
                    Bus.$emit('m','Create a new employee success');
                    this.$router.push({name:'staff.employee.index'});
                }
            })
        },
        preview_photo(event){
            let file = event.currentTarget.files[0];
            this.form.photo = file;

            let reader = new FileReader();
            reader.onload = (event)=>{
                this.photo_preview = event.target.result;
            };
            reader.readAsDataURL(file);
        },
    }
}